<!-- 排班设置页 王艳明 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box">
    <el-card class="box-card">
      <el-button
        type="warning"
        @click="showDialog"
      >添加工作模式</el-button>
      <el-table
        v-loading="loading"
        stripe
        :data="dataList"
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="工作模式编号"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="工作模式"
        >
        </el-table-column>
        <el-table-column
          prop="workPatternTypeDesc"
          label="类型"
        >
        </el-table-column>
        <el-table-column
          prop="workDate"
          label="工作日期"
        >
        </el-table-column>
        <el-table-column
          :formatter="formatter"
          label="工作时间"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="{row}">
            <el-button
              type="primary"
              @click.native.prevent="edit(row)"
            >编辑</el-button>
            <el-button
              type="danger"
              @click="del(row)"
            >删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination
        :current-page="queryForm.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-card>
    <!-- 添加dialog -->
    <el-dialog
      title="添加工作模式"
      :visible.sync="visible"
      :close-on-click-modal="false"
    >
      <el-tabs>
        <!-- 添加模态框 form-->
        <el-tab-pane
          label="礼拜制"
        >
          <el-form
            ref="form"
            label-width="120px"
            :model="dialogForm"
            :rules="rule"
          >
            <el-form-item
              prop="name"
              label="工作模式名称:"
            >
              <el-input v-model="dialogForm.name"></el-input>
            </el-form-item>
            <el-form-item
              prop=""
              label="连续工作天数:"
            >
              <!-- <el-checkbox-group v-model="dialogForm.checkList"> -->
              <el-checkbox
                v-model="dialogForm.monday"
                label="周一"
              ></el-checkbox>
              <el-checkbox
                v-model="dialogForm.tuesday"
                label="周二"
              ></el-checkbox>
              <el-checkbox
                v-model="dialogForm.wednesday"
                label="周三"
              ></el-checkbox>
              <el-checkbox
                v-model="dialogForm.thursday"
                label="周四"
              ></el-checkbox>
              <el-checkbox
                v-model="dialogForm.friday"
                label="周五"
              ></el-checkbox>
              <el-checkbox
                v-model="dialogForm.saturday"
                label="周六"
              ></el-checkbox>
              <el-checkbox
                v-model="dialogForm.sunday"
                label="周日"
              ></el-checkbox>
              <!-- </el-checkbox-group> -->
            </el-form-item>
            <el-form-item
              label="选择时间"
              prop="workMinutes"
            >
              <el-time-picker
                v-model="dialogForm.workMinutes"
                is-range
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
              >
              </el-time-picker>
            </el-form-item>
            <el-form-item>
              <el-button
                type="danger"
                @click="enterButton"
              >确定</el-button>
              <el-button @click="closeDialog">取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <!-- 添加模态框 form3-->
        <el-tab-pane
          label="连续制"
        >
          <el-form
            ref="form3"
            label-width="120px"
            :model="dialogForm3"
            :rules="rule"
          >
            <el-form-item
              prop="name"
              label="工作模式名称:"
            >
              <el-input v-model="dialogForm3.name"></el-input>
            </el-form-item>
            <el-form-item label="连续工作天数">
              <el-row>
                <el-col :span="10">
                  上
                  <el-input
                    v-model="dialogForm3.starDay"
                    placeholder="上几天"
                  ></el-input>
                </el-col>
                <el-col :span="10">
                  休 <el-input
                    v-model="dialogForm3.endDay"
                    placeholder="休几天"
                  ></el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item
              label="选择时间"
              prop="workMinutes"
            >
              <el-time-picker
                v-model="dialogForm3.workMinutes"
                is-range
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
              >
              </el-time-picker>
            </el-form-item>
            <el-form-item>
              <el-button
                type="danger"
                @click="enterButton2"
              >确定</el-button>
              <el-button @click="closeDialog">取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <!-- 编辑dialog -->
    <el-dialog
      title="编辑数据"
      :visible.sync="visible2"
      :close-on-click-modal="false"
    >
      <el-tabs>
        <el-tab-pane
          :label="dialogForm2.typeName"
        >
          <el-form
            ref="form2"
            label-width="120px"
            :model="dialogForm2"
            :rules="rule"
          >
            <el-form-item
              prop="name"
              label="工作模式名称:"
            >
              <el-input v-model="dialogForm2.name"></el-input>
            </el-form-item>
            <el-form-item
              v-if="dialogForm2.typeName==='礼拜制'"
              prop=""
              label="连续工作天数:"
            >
              <!-- <el-checkbox-group v-model="dialogForm.checkList"> -->
              <el-checkbox
                v-model="dialogForm2.monday"
                label="周一"
              ></el-checkbox>
              <el-checkbox
                v-model="dialogForm2.tuesday"
                label="周二"
              ></el-checkbox>
              <el-checkbox
                v-model="dialogForm2.wednesday"
                label="周三"
              ></el-checkbox>
              <el-checkbox
                v-model="dialogForm2.thursday"
                label="周四"
              ></el-checkbox>
              <el-checkbox
                v-model="dialogForm2.friday"
                label="周五"
              ></el-checkbox>
              <el-checkbox
                v-model="dialogForm2.saturday"
                label="周六"
              ></el-checkbox>
              <el-checkbox
                v-model="dialogForm2.sunday"
                label="周日"
              ></el-checkbox>
            </el-form-item>
            <!-- 互斥 -->
            <el-form-item
              v-else
              label="连续工作天数"
            >
              <el-row>
                <el-col :span="10">
                  上
                  <el-input
                    v-model="dialogForm2.starDay"
                    placeholder="上几天"
                  ></el-input>
                </el-col>
                <el-col :span="10">
                  休 <el-input
                    v-model="dialogForm2.endDay"
                    placeholder="休几天"
                  ></el-input>
                </el-col>
              </el-row>
            </el-form-item>

            <el-form-item
              label="选择时间"
              prop="workMinutes"
            >
              <el-time-picker
                v-model="dialogForm2.workMinutes"
                is-range
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
              >
              </el-time-picker>
            </el-form-item>
            <el-form-item>
              <el-button
                type="danger"
                @click="enterButton2"
              >确定</el-button>
              <el-button @click="closeDialog2">取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>

import { workHistoryList, addWorkHistory, updateWorkHistory, deleteWorkHistory } from '@/api/transit'
export default {
  data () {
    return {
      queryForm: {
        page: 1,
        pageSize: 10
      },
      dataList: [],
      loading: false,
      counts: 0,
      visible: false,
      visible2: false,
      title: '',
      // 弹出层表单
      dialogForm: {
        checkList: [],
        workMinutes: [new Date(2016, 9, 10, 9), new Date(2016, 9, 10, 18)],
        monday: false,
        tuesday: false,
        wednesday: false,
        thursday: false,
        friday: false,
        saturday: false,
        sunday: false
      },
      dialogForm2: {
        checkList: [],
        workMinutes: [new Date(2016, 9, 10, 9), new Date(2016, 9, 10, 18)],
        monday: false,
        tuesday: false,
        wednesday: false,
        thursday: false,
        friday: false,
        saturday: false,
        sunday: false,
        starDay: '',
        endDay: '',
        name: ''
      },
      dialogForm3: {
        checkList: [],
        workMinutes: [new Date(2016, 9, 10, 9), new Date(2016, 9, 10, 18)],
        monday: false,
        tuesday: false,
        wednesday: false,
        thursday: false,
        friday: false,
        saturday: false,
        sunday: false
      },
      rule: {
        name: [{ required: true, message: '名称必填!' }],
        checkList: [
          { required: true, message: '*为必填' }
          // { required: true, validator: this.checkDay, trigger: 'change' }
        ],
        workMinutes: [{ required: true, message: '时间必填' }]
      }
    }
  },
  created () {
    this.workHistoryList()
  },
  methods: {
    closeDialog2() {
      this.dialogForm2 = {
        checkList: [],
        workMinutes: [new Date(2016, 9, 10, 9), new Date(2016, 9, 10, 18)],
        monday: false,
        tuesday: false,
        wednesday: false,
        thursday: false,
        friday: false,
        saturday: false,
        sunday: false,
        starDay: '',
        endDay: '',
        name: ''
      }
      this.visible2 = false
      this.$refs.form2.resetFields()
    },
    // 点击删除
    async del(data) {
      this.$confirm('Are you sure you want to delete', 'Are you sure you want to delete').then(async () => {
        await deleteWorkHistory(data.id)
        this.$message.success('success!')
        this.workHistoryList()
      })
    },
    // 点击编辑
    edit(data) {
      this.title = '编辑'
      this.visible2 = true
      // this.dialogForm2 = data
      // 礼拜制
      if (data.workPatternType === 1) {
        this.dialogForm2.typeName = '礼拜制'
        this.dialogForm2.id = data.id
        this.dialogForm2.name = data.name
        this.dialogForm2.friday = data.friday === 1
        this.dialogForm2.monday = data.monday === 1
        this.dialogForm2.saturday = data.saturday === 1
        this.dialogForm2.sunday = data.sunday === 1
        this.dialogForm2.thursday = data.thursday === 1
        this.dialogForm2.tuesday = data.tuesday === 1
        this.dialogForm2.wednesday = data.wednesday === 1
      }
      // 连续制
      if (data.workPatternType === 2) {
        this.dialogForm2.id = data.id
        this.dialogForm2.typeName = '连续制'
        this.dialogForm2.name = data.name
        this.dialogForm2.starDay = data.workDayNum
        this.dialogForm2.endDay = data.restDayNum
      }
      this.dialogForm2.workMinutes = [
        new Date(2016, 9, 10, Math.floor(data.workStartMinute1 / 60), data.workStartMinute1 % 60),
        new Date(2016, 9, 10, Math.floor(data.workEndMinute1 / 60), data.workEndMinute1 % 60)
      ]
    },
    // 表单确定按下  后续判断是哪两种方式
    enterButton() {
      if (this.title === '编辑') {
        updateWorkHistory({
          id: this.dialogForm.id,
          friday: this.dialogForm.friday === true ? 1 : 2,
          monday: this.dialogForm.monday === true ? 1 : 2,
          name: this.dialogForm.name,
          saturday: this.dialogForm.saturday === true ? 1 : 2,
          sunday: this.dialogForm.sunday === true ? 1 : 2,
          thursday: this.dialogForm.thursday === true ? 1 : 2,
          tuesday: this.dialogForm.tuesday === true ? 1 : 2,
          wednesday: this.dialogForm.wednesday === true ? 1 : 2,
          workPatternType: 1,
          workStartMinute1: this.dialogForm2.workMinutes[0].getMinutes() + this.dialogForm.workMinutes[0].getHours() * 60,
          workEndMinute1: this.dialogForm2.workMinutes[1].getMinutes() + this.dialogForm.workMinutes[1].getHours() * 60
        })
      } else {
        this.$refs.form.validate(async f => {
          if (!f) return
          await this.addWorkHistory({
            friday: this.dialogForm.friday === true ? 1 : 2,
            monday: this.dialogForm.monday === true ? 1 : 2,
            name: this.dialogForm.name,
            saturday: this.dialogForm.saturday === true ? 1 : 2,
            sunday: this.dialogForm.sunday === true ? 1 : 2,
            thursday: this.dialogForm.thursday === true ? 1 : 2,
            tuesday: this.dialogForm.tuesday === true ? 1 : 2,
            wednesday: this.dialogForm.wednesday === true ? 1 : 2,
            workPatternType: 1,
            workStartMinute1: this.dialogForm.workMinutes[0].getMinutes() + this.dialogForm.workMinutes[0].getHours() * 60,
            workEndMinute1: this.dialogForm.workMinutes[1].getMinutes() + this.dialogForm.workMinutes[1].getHours() * 60
          })

          this.$message.success('success!')
          this.workHistoryList()
        })
      }
      this.closeDialog()
    },
    // 第二套表单的按钮点击
    enterButton2() {
      if (this.title === '编辑' && this.dialogForm2.typeName === '连续制') {
        updateWorkHistory({
          workDayNum: this.dialogForm2.starDay,
          restDayNum: this.dialogForm2.endDay,
          id: this.dialogForm2.id,
          name: this.dialogForm2.name,
          workPatternType: '2',
          workStartMinute1: this.dialogForm2.workMinutes[0].getMinutes() + this.dialogForm.workMinutes[0].getHours() * 60,
          workEndMinute1: this.dialogForm2.workMinutes[1].getMinutes() + this.dialogForm.workMinutes[1].getHours() * 60
        })
      } else {
        updateWorkHistory({
          id: this.dialogForm2.id,
          name: this.dialogForm2.name,
          workPatternType: '1',
          workStartMinute1: this.dialogForm2.workMinutes[0].getMinutes() + this.dialogForm.workMinutes[0].getHours() * 60,
          workEndMinute1: this.dialogForm2.workMinutes[1].getMinutes() + this.dialogForm.workMinutes[1].getHours() * 60,
          monday: this.dialogForm2.monday ? 1 : 2,
          tuesday: this.dialogForm2.tuesday ? 1 : 2,
          wednesday: this.dialogForm2.wednesday ? 1 : 2,
          thursday: this.dialogForm2.thursday ? 1 : 2,
          sunday: this.dialogForm2.sunday ? 1 : 2,
          friday: this.dialogForm2.friday ? 1 : 2,
          saturday: this.dialogForm2.saturday ? 1 : 2
        })
      }
      this.closeDialog2()
    },
    // 添加工作模式接口
    addWorkHistory(data) {
      addWorkHistory(data)
    },

    closeDialog() {
      this.visible = false
      this.dialogForm = {}
      this.dialogForm3 = {}
      this.$refs.form.resetFields()
      this.$refs.form3.resetFields()
    },
    // 点击添加
    showDialog() {
      this.visible = true
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    // 分页请求
    handleCurrentChange(val) {
      this.queryForm.page = val
      this.workHistoryList(this.queryForm)
    },
    // 表格内容格式化
    formatter(row, column, cellValue, index) {
      return (row.workStartMinute1 / 60).toFixed(2) + '小时'
    },
    // 请求工作模式数据
    async workHistoryList(data) {
      this.loading = true
      const res = await workHistoryList(data)
      this.dataList = res.data.items
      this.counts = +res.data.counts
      this.loading = false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
/deep/ .table-card-box {
  .el-card__body {
    padding-bottom: 0px;
  }
}
/deep/ .pagination{
  padding-bottom: 30px;
}
.tab-box {
  color: #20232a;
  /deep/ .el-tabs__item.is-active {
    color: #20232a;
    font-size: 16px;
    font-weight: bold;
  }
  /deep/ .el-form-item__content {
    height: 40px;
  }
  /deep/ .el-tabs__item {
    font-size: 14px;
  }
  /deep/ .el-tabs__item:hover {
    color: #20232a;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  /deep/ .el-tabs__active-bar {
    background-color: #e15536;
  }
  /deep/ .tips {
    margin-left: 130px;
    margin-bottom: 14px;
    color: #bac0cd;
  }
  .el-checkbox {
    margin-right: 12px;
  }
  /deep/ .workDay {
    .el-form-item__error {
      position: relative;
    }
  }
}
/deep/ .el-dialog__body {
  padding-top: 30px !important;
  .el-tabs__header {
    padding-bottom: 25px;
  }
}
/deep/ .el-tabs__nav,
.is-top {
  transform: translateX(30px) !important;
}
.box-card{
  margin: 20px;
}
.el-button{
  width: 100px;
  padding: 10px 0;
}
/deep/ .is-active{
  font-size: 17px !important;
  font-weight: 300;
}
</style>
